<template>
  <div class="box">
    <div id="login_box">
      <h2>用户注册</h2>
      <div id="form">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="70px" class="demo-ruleForm">
          <el-form-item prop="id" label="账号">
            <el-input placeholder="请输入账号" v-model="ruleForm.id"></el-input>
          </el-form-item>
          <el-form-item prop="pass" label="密码">
            <el-input type="password" placeholder="请输入密码" v-model="ruleForm.pass" autocomplete="off" show-password></el-input>
          </el-form-item>
          <el-form-item prop="checkPass" label="确认密码">
            <el-input type="password" placeholder="请确认密码" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="submitForm('ruleForm')">登陆并注册</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    var validateId = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入账号'))
      } else if (/^[\u2E80-\u9FFF]+$/.test(value)) {
        callback(new Error('账号里不能出现中文'))
      } else {
        if (value.length > 12) {
          callback(new Error('账号长度不能大于12'))
        } else if (value.length < 4) {
          callback(new Error('账号长度不能小于4'))
        } else { // 判断账号是否存在
          var that = this
          this.axios({
            url: 'http://localhost:8080/linearAlgebra/findById',
            method: 'post',
            data: {
              id: value
            }
          })
            .then(function (response) {
              that.repeat = response.data
            })
        }
        callback()
      }
    }
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (value.length > 12) {
          callback(new Error('密码度不能大于12'))
        } else if (value.length < 4) {
          callback(new Error('密码长度不能小于4'))
        }
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      ruleForm: {
        pass: '',
        checkPass: '',
        id: '',
        email: ''
      },
      rules: {
        id: [
          {
            validator: validateId, trigger: 'blur'
          }
        ],
        pass: [
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ]
      },
      repeat: ''
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (this.repeat.length !== 0) {
          this.open_fail('账号已存在')
          return false
        }
        if (valid) {
          this.open_success('注册成功！即将登陆')
          this.addUser()
          this.$router.push('/index')
        } else {
          this.open_fail('注册失败！请重新注册')
          return false
        }
      })
    },
    addUser () {
      var that = this
      this.axios(
        {
          url: 'http://localhost:8080/linearAlgebra/addUser',
          method: 'post',
          data: {
            id: that.ruleForm.id,
            password: that.ruleForm.pass
          }
        }
      )
    },
    open_success (msg) {
      this.$message({
        message: msg,
        type: 'success'
      })
    },
    open_fail (msg) {
      this.$message.error(msg)
    }
  }
}
</script>

<style scoped>
  *{
    padding: 0px;
    margin: 0px;
  }
  .box{
    position : absolute;
    width : 100%;
    height : 100%;
    border: 1px solid transparent;
    background-image: url('../../../static/img/background8.png');
    background-size: contain;
    background-repeat: no-repeat;
  }
  #login_box{
    width:21%;
    height: 350px;
    background:#3a8ee663;
    /*background:#409EFF;*/
    float: right;
    margin-top: 8%;
    margin-right: 10%;
    text-align: center;
    border-radius: 10px;
    padding: 50px 50px;
  }
  .in{
    height: 23px;
  }
  #login_box h2{
    color: #fff;
    margin-top: 3%;
  }
  #login_box #form #input_box i{
    color: #fff;
  }
  #login_box #form #input_box input{
    border:0;
    width: 60%;
    font-size: 15px;
    color: #fff;
    background: #ffffff00;
    border-bottom: 2px solid#fff;
    padding: 5px 10px;
    margin-top: 10px;
  }
  #login_box button{
    margin-top: 35px;
    width: 50%;
    height: 30px;
    border-radius: 10px;
    border: 0;
    color: #fff;
    font-size: 15px;
    background-image: linear-gradient(to top, #30324d 0%, #5f6298 100%);
  }
  #login_box #Sign{
    margin-top: 15px;
    margin-left: 50%;
  }
  .el-form-item{
    padding-top: 30px;
    padding-left: 10px;
  }
  .el-input{
    padding-left: 0px;
    float: left;
  }
</style>
